<!DOCTYPE html> 
<html lang="zh-CN"> 
<head>  
    <meta charset="UTF-8">
  
    <title>五星红旗</title> 
</head>  
<body>  
   
    <div class="flag"> 
        <div class="star big-star"></div>
        <div class="star small-star star-1"></div> 
        <div class="star small-star star-2"></div> 
        <div class="star small-star star-3"></div>   
        <div class="star small-star star-4"></div> 
    </div>  
    <style>  
       
       
        body, html {  
            height: 100%;
            margin: 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
          
        }  
  
  
       
        .flag {  
            width: 300px;
            height: 200px; 
            background-color: red; 
            position: relative; 
  
        .star {  
            position: absolute; 
            background-color: yellow;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* 使用clip-path属性裁剪成五角星形状 */  
        }  
  
        .big-star {  
            width: 60px;
            height: 60px;  
            top: 20px;
            left: 20px; 
        }  
  
      
        .small-star {  
            width: 20px; 
            height: 20px; 
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);   
            transform: rotate(45deg);
        }  
  
        
        .star-1 {  
            top: 10px; 
            left: 90px; 
        }  
  
      
        .star-2 {  
            top: 30px;
            left: 110px;
        }  
  
        .star-3 {  
            top: 60px;
            left: 110px;
        }  
  
    
        .star-4 {  
            top: 80px;
            left: 90px; 
        }  
    </style>  
</body>  
</html>
